5-1-3. クラス命名規則

MindBEMdingを元にした命名規則を使用します。
ただし作業時にクラス選択を容易にすることを目的に社内では通常のBEM記法とは異なり、ローワーキャメルケースとアンダーバーによる命名を使用します。

基本形

.プレフィックス_ブロック[_エレメント(*n)][__モディファイア]

プレフィックス：前述したレイヤーごとのプレフィックス
ブロック：設定する要素のモジュール名
エレメント：ブロックの子要素名。ブロックに属した要素のためブロック外では独立して使用できない。ブロックの孫要素を指定する場合はエレメントを連ねて指定してください。
モディファイア：元となるブロックまたはエレメントが通常の状態から変化した要素。

作成例

<section class="c_module">
  <h2 class="c_module_title"></h2>
  <ul class="c_module_list">
    <li class="c_module_list_item">クリア</li>
    <li class="c_module_list_item">クリア</li>
    <li class="c_module_list_item">クリア</li>
    <li class="c_module_list_item c_module_list_item__error">エラー</li>
    <li class="c_module_list_item">クリア</li>
  </ul>
</section>

その他命名規則

• 使用可能な文字は半角英数字のみです。
• 端的で分かりやすい英単語で命名し、タグ名は含めないでください。※1
• 言葉にして伝わらない略称を命名に使用しないでください。企業名の公式による一般的な略称（JAL、JTBほか）などは可とします。※2
• 商品名などの固有名詞を綴ったローマ字表記以外のローマ字表記は使用しないでください。※3
• 複数単語による命名の場合はローワーキャメルケースで命名してください。

※1
✕ c_listUl、c_titleH1
○ c_naviList、c_mainTitle

※2
✕ cpn、ttl
○ info、navi

※3
✕ pankuzu、shasin
○ breadcrumbs、picture